<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>二手好房 - 房源详情</title>

    <!-- Bootstrap core CSS -->
    <link href="{{ url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="https://cdn.bootcss.com/font-awesome/5.8.1/css/all.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{{ url_for('static', filename='css/clean-blog.min.css') }}" rel="stylesheet">

    <style>
        #mainNav {
            border-bottom: 1px solid #ecf0f1;
            background: transparent;
        }

        #mainNav .navbar-brand {
            padding: 10px 20px;
            color: #343a40;
        }

        #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
            color: #0085A1;
        }

        #mainNav .navbar-nav > li.nav-item > a {
            padding: 10px 20px;
            color: #343a40;
        }

        #mainNav .navbar-nav > li.nav-item > a:focus, #mainNav .navbar-nav > li.nav-item > a:hover {
            color: #0085A1;
        }

        header.masthead {
            margin-bottom: 50px;
            background: no-repeat center center;
            background-color: #fff;
            background-attachment: scroll;
            position: relative;
            background-size: cover;
        }

        header.masthead .overlay {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: #fff;
            opacity: 0.5;
        }

        .course {
            margin-top: 10px;
            padding: 7px 5px 0 5px;
            background: #fff;
        }

        /*本页的内容*/
        .no-margin-bottom {
            margin-bottom: 0 !important;
        }

        .detail-body {
            background: #fff;
            margin-top: 100px;

        }

        .info-line {
            margin: 10px 0 35px 0;
        }

        .house-info {
            padding: 20px 0 20px 0;
            font-size: 20px;
            color: #e74c3c;
        }

        .detail-header {
            margin: 50px 0 10px;
        }

        .describe {
            font-size: 15px;
            color: #bdc3c7;
        }

        /* 二级标题 */
        .attribute-header {
            padding: 30px 0 10px 0;
            margin-bottom: 5px;
            font-size: 22px;
            font-weight: 500;
            border-bottom: #ecf0f1 1px solid;
        }

        .attribute-header .attribute-header-tip-line {
            font-size: 14px;
            color: #a4b0be;
            font-weight: 300;
            line-height: 25px;
        }

        /* 属性 */
        .attribute-info {
            padding: 20px;
        }

        .attribute-text {
            font-size: 14px;
            color: #a4b0be;
            font-weight: 300;
            line-height: 25px;
            text-align: justify;
        }

        .info-text {
            font-size: 14px;
            color: #555;
            font-weight: 400;
            line-height: 40px;
            text-align: justify;
        }

        .collection {
            margin-left: 420px;
            background-color: #fff;
            border-radius: 3px;
            border: 1px solid #ecf0f1;
            display: inline-block;
            position: absolute;
        }

        .collection:hover {
            background-color: #f1c40f;
            border: 0.5px solid #ecf0f1;

        }

        .collection i {
            color: #f1c40f;
            padding: 5px 10px;
        }

        .collection:hover i {
            color: #fff;
        }

        /* 配套设施 */
        .icon-1 {
            width: 28px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/bx.png') no-repeat;
            display: block;
        }

        .icon-2 {
            width: 36px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/xyj.png') no-repeat;
            display: block;
        }

        .icon-3 {
            width: 48px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/ds.png') no-repeat;
            display: block;
        }

        .icon-4 {
            width: 48px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/kt.png') no-repeat;
            display: block;
        }

        .icon-5 {
            width: 28px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/nq.png') no-repeat;
            display: block;
        }

        .icon-6 {
            width: 46px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/rsq.png') no-repeat;
            display: block;
        }

        .icon-7 {
            width: 48px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/trq.png') no-repeat;
            display: block;
        }

        .icon-8 {
            width: 48px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/chuang.png') no-repeat;
            display: block;
        }

        .icon-9 {
            width: 46px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/wifi.png') no-repeat;
            display: block;
        }

        .icon-10 {
            width: 46px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/dt.png') no-repeat;
            display: block;
        }

        .attribute-text-sm {
            font-size: 14px;
            color: #a4b0be;
            font-weight: 300;
            line-height: 25px;
            text-align: center;
            margin: 0 auto;
            display: block;
        }

        /* recommend */
        .recommend {
            margin-top: 5px;
            padding-top: 27px;
        }

        .recommend-info span {
            font-size: 14px;
            color: #555;
            font-weight: 400;
            line-height: 20px;
            text-align: justify;
        }

        .recommend-info1 {
            height: 20px;
            font-weight: 300;
            font-size: 13px;
        }

        /* side data */
        #pie {
            height: 290px;
        }

        #f_line {
            height: 290px;
        }

        #scolumn_line {
            height: 380px;
        }

        #broken_line {
            height: 340px;
        }

        .self-no-padding {
            padding: 0;
        }

        /* login */
        .m-header {
            padding: 10px 16px 2px;
        }

        .login_form {
            margin-top: 150px;
            z-index: 1055;
        }

        .form-info {
            font-size: 18px;
            color: #2c3e50;
        }

        .switch-info {
            font-size: 14px;
            color: #2c3e50;
        }

        .btn {
            padding: 10px 20px;
            border-radius: 2px;
        }
    </style>
</head>

<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
        <a class="navbar-brand" href="/">二手好房</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                aria-label="Toggle navigation">
            Menu
            <i class="fas fa-bars"></i>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">首页</a>
                </li>

                <li class="nav-item" id="user">
                    {% if session.get('user_id') %}
                    <div class="dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false">
                            欢迎，{{ session.get('username') }}
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="/user">个人中心</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="/logout">退出登录</a>
                        </div>
                    </div>
                    {% else %}
                    <a class="nav-link" data-toggle="modal" data-target="#login" href="">登录</a>
                    {% endif %}
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- Page Header -->
<header class="masthead no-margin-bottom" style="background-color: #fff">
    <div class="overlay"></div>
    <div class="container">
        <!--内容-->
        <div class="row">
            <div class="col-lg-12 col-md-12 mx-auto detail-body">
                <div class="row info-line">
                <!--大标题-->
                <div class="col-lg-12 col-md-12 detail-header">
                    <h3>{{ house.address }}&nbsp{{ house.rooms }}</h3>
                    <div class="describe">
                        <span>为您精准定位，当前城市房源信息</span>
                    </div>
                </div>
                    <!--左详情-->
                    <div class="col-lg-8 col-md-8">
                        <div class="course">
                    <!--图-->
                    <div><a href="#"><img class='img-fluid img-box' src="{{ url_for('static', filename='img/house-bg1.jpg') }}" alt=""></a>
                    </div>
                    <!--价格-->
                    <div class="house-info">
                        <span class="price">{{ house.price }}/月</span>
                        <span class="collection" id="btn-collection" data-house-id="{{ house.id }}">
                            <a>
                                {% if is_collected %}
                                <i class="fa fa-heart" aria-hidden="true"></i> 取消收藏
                                {% else %}
                                <i class="fa fa-heart-o" aria-hidden="true"></i> 收藏房源
                                {% endif %}
                            </a>
                        </span>
                    </div>

                            <!--基本信息标题-->
                            <div class="attribute-header">
                                <h4>基本信息</h4>
                            </div>
                            <!--属性1-->
                            <div class="row attribute-info">
                                <div class="col-lg-2 col-md-2">
                                    <span class="attribute-text">基本属性</span>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                <div>
                                    <span class="attribute-text">房屋户型：</span>
                                    <span class="info-text">{{ house.rooms }}</span>
                                </div>
                                <div>
                                    <span class="attribute-text">建筑面积：</span>
                                    <span class="info-text">{{ house.area }}</span>
                                </div>
                                <div>
                                    <span class="attribute-text">房屋朝向：</span>
                                    <span class="info-text">{{ house.direction }}</span>
                                </div>
                                </div>
                                <div class="col-lg-6 col-md-6">
                                <div>
                                    <span class="attribute-text">所在区域：</span>
                                    <span class="info-text">{{ house.region }}</span>
                                </div>
                                <div>
                                    <span class="attribute-text">租住类型：</span>
                                    <span class="info-text">{{ house.rent_type }}</span>
                                </div>
                                <div>
                                    <span class="attribute-text">房东电话：</span>
                                    <span class="info-text">{{ house.phone_num }}</span>
                                </div>
                                </div>
                            </div>
                            <!--属性2-->
                            <div class="row attribute-info">
                                <div class="col-lg-2 col-md-2">
                                    <span class="attribute-text">房屋卖点</span>
                                </div>
                                <div class="col-lg-8 col-md-8">
                            <div>
                                <span class="attribute-text">交通条件：</span>
                                <span class="info-text">{{ house.traffic }}</span>
                            </div>
                            <div>
                                <span class="attribute-text">优势条件：</span>
                                <span class="info-text">{{ house.highlights }}</span>
                            </div>
                                </div>
                            </div>

                            <!--房源配套设施-->
                            <div class="attribute-header">
                                <h4>房源配套设施</h4>
                            </div>
                            <!--设施列表-->
                            <div class="row attribute-info">
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-1"></span>
                                    <span class="attribute-text-sm" style="color: #f1c40f">冰箱</span>
                                </div>
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-2"></span>
                                    <span class="attribute-text-sm" style="color: #f1c40f">洗衣机</span>
                                </div>
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-3"></span>
                                    <span class="attribute-text-sm" style="color: #f1c40f">电视</span>
                                </div>
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-4"></span>
                                    <span class="attribute-text-sm" style="color: #f1c40f">空调</span>
                                </div>
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-5"></span>
                                    <span class="attribute-text-sm" style="color: #f1c40f">暖气</span>
                                </div>
                            </div>
                            <div class="row attribute-info">
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-6"></span>
                                    <span class="attribute-text-sm" style="color: #f1c40f">热水器</span>
                                </div>
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-7"></span>
                                    <span class="attribute-text-sm"><s>天然气</s></span>
                                </div>
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-8"></span>
                                    <span class="attribute-text-sm" style="color: #f1c40f">床</span>
                                </div>
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-9"></span>
                                    <span class="attribute-text-sm" style="color: #f1c40f">Wi-Fi</span>
                                </div>
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-10"></span>
                                    <span class="attribute-text-sm" style="color: #f1c40f">电梯</span>
                                </div>
                            </div>

                            <!--推荐标题-->
                            <div class="attribute-header">
                                <h4>推荐房源</h4>
                                <div class="attribute-header-tip-line">
                                    <span>根据您的浏览习惯，推荐优质房源</span>
                                </div>
                            </div>
                            <!--推荐-->
                            <div class="row">
                                <div class="col-md-11 col-lg-11">
                                    <div class="row">
                                        {% for rec_house in recommended_houses %}
                                        <!-- 推荐房源{{ loop.index }} -->
                                        <div class="col-lg-4 col-md-4">
                                            <div class="recommend">
                                                <div><a href="/house/{{ rec_house.id }}"><img class='img-fluid img-box'
                                                                             src="{{ url_for('static', filename='img/house-bg1.jpg') }}"
                                                                             alt=""></a>
                                                </div>
                                                <div class="recommend-info">
                                                    <span class="glyphicon glyphicon-map-marker"></span>
                                                    <span>{{ rec_house.address }}</span>
                                                </div>
                                                <div class="recommend-info1">
                                                    <span>{{ rec_house.rooms }}-{{ rec_house.area }}</span>
                                                    <span class="price float-right" style="color: #e74c3c">{{ rec_house.price }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--右边栏-->
                    <div class="col-lg-4 col-md-4">
                        <div class="row">
                            <!--价格走势图表-->
                            <div class="col-lg-12 col-md-12 mx-auto attribute-header">
                                <h4><i class="fa fa-align-right" aria-hidden="true"></i>&nbsp&nbsp海淀区
                                    价格走势</h4>
                                <div class="attribute-header-tip-line">
                                    <span>人工智能算法，为您预测房价走势</span>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 mx-auto browse-record-first-div self-no-padding">
                                <div id="f_line" class="echarts-tu">
                                    <!-- 图表将通过JS渲染 -->
                                </div>
                            </div>

                            <!--户型占比图表-->
                            <div class="col-lg-12 col-md-12 mx-auto attribute-header">
                                <h4><i class="fa fa-align-right" aria-hidden="true"></i>&nbsp&nbsp海淀区
                                    户型占比</h4>
                                <div class="attribute-header-tip-line">
                                    <span>根据户型占比，了解户型稀缺度</span>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 mx-auto browse-record-first-div self-no-padding">
                                <div id="pie">
                                    <!-- 图表将通过JS渲染 -->
                                </div>
                            </div>

                            <!--小区房源数量图表-->
                            <div class="col-lg-12 col-md-12 mx-auto attribute-header">
                                <h4><i class="fa fa-align-right" aria-hidden="true"></i>&nbsp&nbsp海淀区
                                    小区房源数量TOP20</h4>
                                <div class="attribute-header-tip-line">
                                    <span>关注房源数量，了解房源热点</span>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 mx-auto browse-record-first-div self-no-padding">
                                <div id="scolumn_line">
                                    <!-- 图表将通过JS渲染 -->
                                </div>
                            </div>

                            <!--户型价格走势图表-->
                            <div class="col-lg-12 col-md-12 mx-auto attribute-header">
                                <h4><i class="fa fa-align-right" aria-hidden="true"></i>&nbsp&nbsp海淀区
                                    户型价格走势</h4>
                                <div class="attribute-header-tip-line">
                                    <span>关注房源单价，了解各小区房价</span>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 mx-auto browse-record-first-div self-no-padding">
                                <div id="broken_line">
                                    <!-- 图表将通过JS渲染 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--注册登录-->
        <div class="row info-line">
            <div class="col-lg-8 col-md-10 mx-auto">
                <!-- 注册窗口 -->
                <div id="register" class="modal fade login_form" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-body m-header">
                                <button class="close" data-dismiss="modal">
                                    <span>&times;</span>
                                </button>
                            </div>
                            <div class="modal-title">
                                <h1 class="text-center">注册</h1>
                            </div>
                            <div class="modal-body">
                                <form class="form-group" id="registeform" action="/register" method="post">
                                    <div class="form-group">
                                        <label for="" class="form-info">用户名</label>
                                        <input class="form-control" name="username" type="text"
                                               placeholder="6-15位字母或数字">
                                    </div>
                                    <div class="form-group">
                                        <label for="" class="form-info">密码</label>
                                        <input class="form-control" name="password" type="password"
                                               placeholder="至少6位字母或数字">
                                    </div>
                                    <div class="form-group">
                                        <label for="" class="form-info">再次输入密码</label>
                                        <input class="form-control" name="confirmPassword" type="password"
                                               placeholder="至少6位字母或数字">
                                    </div>
                                    <div class="form-group">
                                        <label for="" class="form-info">邮箱</label>
                                        <input class="form-control" name="email" type="email"
                                               placeholder="例如:123@123.com">
                                    </div>
                                    <div class="text-right">
                                        <button class="btn btn-primary" id='registe-btn'>提交</button>
                                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                                    </div>
                                    <a href="" data-toggle="modal" data-dismiss="modal" data-target="#login"
                                       class="switch-info">已有账号？点我登录</a>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 登录窗口 -->
                <div id="login" class="modal fade login_form">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-body m-header">
                                <button class="close" data-dismiss="modal">
                                    <span>&times;</span>
                                </button>
                            </div>
                            <div class="modal-title">
                                <h1 class="text-center">登录</h1>
                            </div>
                            <div class="modal-body">
                                <div id="login-session-alert" class="alert alert-warning d-none" role="alert"></div>
                                <form class="form-group" id="loginform" action="/login" method="post">
                                    <div class="form-group">
                                        <label for="" class="form-info">用户名</label>
                                        <input class="form-control" name="username" type="text" placeholder="">
                                    </div>
                                    <div class="form-group">
                                        <label for="" class="form-info">密码</label>
                                        <input class="form-control" name="password" type="password" placeholder="">
                                    </div>
                                    <div class="text-right">
                                        <button class="btn btn-primary" id='login-btn'>登录</button>
                                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                                    </div>
                                    <a href="" data-toggle="modal" data-dismiss="modal"
                                       data-target="#register" class="switch-info">还没有账号？点我注册</a>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<hr>
<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-10 mx-auto">
                <p class="copyright text-muted">Copyright &copy; 二手好房 2019</p>
            </div>
        </div>
    </div>
</footer>

<!-- Bootstrap core JavaScript -->
<script src="{{ url_for('static', filename='vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<script src="{{ url_for('static', filename='js/login.js') }}"></script>

<!-- Custom scripts for this template -->
<script src="{{ url_for('static', filename='js/clean-blog.min.js') }}"></script>

<!-- side data -->
<script type="text/javascript" src="{{ url_for('static', filename='vendor/echarts-stat/ecStat.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/infographic.js') }}"></script>
<script src="{{ url_for('static', filename='js/show_data_pie.js') }}"></script>
<script src="{{ url_for('static', filename='js/f_data.js') }}"></script>
<script src="{{ url_for('static', filename='js/show_column_data.js') }}"></script>
<script src="{{ url_for('static', filename='js/show_broken_line_data.js') }}"></script>

<!-- 会话超时管理 -->
<script src="/static/js/session-timeout.js"></script>

<script>
    const chartData = {{ chart_data|tojson }};

    function showEmpty(elId, text) {
        const el = document.getElementById(elId);
        if (!el) return;
        el.innerHTML = `<div style="text-align:center;color:#999;padding:40px 0;">${text || '暂无数据'}</div>`;
    }

    function renderScatter() {
        if (!chartData.scatter || !chartData.scatter.length) {
            return showEmpty('f_line', '暂无面积与价格数据');
        }
        const chart = echarts.init(document.getElementById('f_line'));
        chart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: ({ value }) => `面积：${value[0]}㎡<br/>价格：￥${value[1].toLocaleString()}`
            },
            xAxis: { type: 'value', name: '面积 (㎡)' },
            yAxis: { type: 'value', name: '价格 (元)' },
            series: [{
                type: 'scatter',
                symbolSize: val => Math.min(Math.max(val[1] / 200, 8), 30),
                itemStyle: { color: '#0076fc' },
                data: chartData.scatter
            }]
        });
    }

    function renderPie() {
        if (!chartData.pie || !chartData.pie.length) {
            return showEmpty('pie', '暂无户型分布数据');
        }
        const chart = echarts.init(document.getElementById('pie'));
        chart.setOption({
            tooltip: { trigger: 'item', formatter: '{b}: {c} 套 ({d}%)' },
            series: [{
                type: 'pie',
                radius: ['35%', '70%'],
                data: chartData.pie
            }]
        });
    }

    function renderColumn() {
        if (!chartData.column || !chartData.column.names.length) {
            return showEmpty('scolumn_line', '暂无社区排行数据');
        }
        const chart = echarts.init(document.getElementById('scolumn_line'));
        chart.setOption({
            tooltip: { trigger: 'axis' },
            grid: { left: '5%', right: '5%', bottom: '8%', containLabel: true },
            xAxis: { type: 'category', data: chartData.column.names },
            yAxis: { type: 'value', name: '套数' },
            series: [{
                type: 'bar',
                data: chartData.column.values,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#00d386' },
                        { offset: 1, color: '#0076fc' }
                    ])
                }
            }]
        });
    }

    function renderTrend() {
        if (!chartData.trend || !chartData.trend.dates.length) {
            return showEmpty('broken_line', '暂无价格走势数据');
        }
        const chart = echarts.init(document.getElementById('broken_line'));
        chart.setOption({
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: chartData.trend.dates },
            yAxis: { type: 'value', name: '平均价格 (元)' },
            series: [{
                name: '平均价格',
                type: 'line',
                smooth: true,
                data: chartData.trend.values,
                areaStyle: { color: 'rgba(0,118,252,0.1)' },
                lineStyle: { color: '#0076fc' }
            }]
        });
    }

    renderScatter();
    renderPie();
    renderColumn();
    renderTrend();

    $('document').ready(function () {
        // 点击收藏按钮
        $("#btn-collection").on("click", function () {
            var houseId = $(this).data('house-id');
            $.ajax({
                url: '/api/toggle_collect',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    house_id: houseId
                }),
                success: function(response) {
                    if (response.success) {
                        alert(response.message);
                        if (response.action === 'collect') {
                            $("#btn-collection").html('<i class="fa fa-heart"></i> 取消收藏');
                        } else {
                            $("#btn-collection").html('<i class="fa fa-heart-o"></i> 收藏房源');
                        }
                    } else {
                        if (response.error === '请先登录') {
                            window.location.href = '/login?next=' + encodeURIComponent(window.location.pathname + window.location.search);
                        } else {
                            alert('操作失败: ' + response.error);
                        }
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 401 || xhr.status === 0) {
                        window.location.href = '/login?next=' + encodeURIComponent(window.location.pathname + window.location.search);
                    } else {
                        alert('网络错误，请稍后重试');
                    }
                }
            });
        });
    });
</script>
</body>

</html>
